<template>
    <div class="poster">

        <div class="poster-img-full">
            <p>{{$t('home.title')}}</p>
        </div>

        <div class="poster-img-center">
            <div class="img-box">
                <img src="../../assets/images/img2.jpg"/>
            </div>
            <div class="text-box contain">
                <div class="poster-img-text">
                    <Row>
                        <Col :xs="10" :md="12" :lg="18">
                            <p>{{$t('home.title')}}</p>
                            <p>The Most Secure Crypto Hardware Wallet with Mobile App Support to Protect Your Crypto Assets.</p>
                        </Col>
                    </Row>
                    <!-- <p>ELLIPAL - The Cold Wallet 2.0</p> -->
                </div>
            </div>
        </div>

        <div class="poster-img-depart contain">
            <!-- <Col :xs="10" :md="12" :lg="18">
                <p>ELLIPAL - The Cold Wallet 2.0</p>
                <p>The Most Secure Crypto Hardware Wallet with Mobile App Support to Protect Your Crypto Assets.</p>
            </Col> -->
            <Row>
                <Col :xs="24" :sm="12" :md="12" :lg="12" class="panel-left">
                    <p>{{$t('home.title')}}</p>
                </Col>
                <Col :xs="24" :sm="12" :md="12" :lg="12" class="panel-right">
                    <img src="../../assets/images/img3.png" />
                </Col>
            </Row>
        </div>

    </div>
</template>
<script>
export default {
    name: "CommonPoster",
    data () {
        return {

        }
    }
}
</script>
<style lang="scss" scoped="" type="text/css">
.poster{
    font-size: .35rem;
    .poster-img-full{
        color:#fff;
        width: 100%;
        min-height: 10rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url(../../assets/images/img1.jpg) bottom center no-repeat;
        p{
            display: block;
            width: 100%;
            height: auto;
            text-align: center
        }
    }
    .poster-img-center{
        position: relative;
        color:#fff;
        .img-box{
            img{
                width: 100%;
            }
        }
        .text-box{
            position:absolute;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            // justify-content: center;
            top: 0;
            .poster-img-text{
                display: flex;
                align-items: center;
                // justify-content: center;
                padding-left: .5rem;
            }
        }
    }
    .poster-img-depart{
        width: 100%;
        min-height: 10rem;
        .panel-right{
            img{
                width: 100%;
            }
        }
    }
    
}

</style>

